<template>
    <!-- 弹框默认组件 -->
    <transition name="dialog-fade">
        <div class="rx-modal" :size="size" v-show="show">
            <!-- 头部 -->
            <div class="modal-header"  v-drag>
                <a class="trigger-close" mask-close>
                    <rx-icon name="rx-close"></rx-icon>
                </a>
                <slot name="header"></slot>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
              <div class="modal-body-content">
                <slot></slot>
              </div>
            </div>
            <div class="modal-footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
  name: "rx-popup",
  props: {
    size: {
      type: String,
      default: "normal"
    },
    isCenter:{
      type:Boolean,
      default:false
    }//position top bottom
    
  },
  data(){
    return {
        show:false,
    }
  },
  mounted() {
    var _this = this;
    _this.show = true;
    Vue.nextTick(() => {
     
    // 实时计算最大高度
      var _$el = _this.$el;
      var bodyHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      var headerHeight = _$el.querySelector(".modal-header").clientHeight;
     
      var footerHeight = _$el.querySelector(".modal-footer").clientHeight;
      var contentTop = _$el.offsetTop;
      var maxSize =
        bodyHeight -
        headerHeight -
        footerHeight -
        _$el.offsetTop -
        contentTop -
        30;
      _$el.querySelector(".modal-body").style.maxHeight = maxSize + "px";
     
      if (_this.isCenter) { // 判断如果是center，弹框位置居中
        _$el.style.top = bodyHeight / 2 + 'px';
        _$el.style.marginTop = -(_$el.clientHeight / 2 + 1 )+ 'px';
      }
     
    })
  }
};
</script>
<style lang="scss">
  // 弹框基本样式
.rx-modal {
    width: 640px;
    background-color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 30px;
    border-radius:8px;
  
    //遍历尺寸
    $sizes: (
      (
        type: "large",
        width: 800px,
        minHeight: 372px,
        contentWidth:740px
      ),
      (
        type: "middle",
        width: 640px,
        minHeight: 270px,
         contentWidth:580px
      ),
      (
        type: "normal",
        width: 520px,
        minHeight: 148px,
         contentWidth:460px
      ),
      (
        type: "small",
        width: 440px,
        minHeight: 108px,
        contentWidth:380px
      )
    );
  
    @for $i from 1 through length($sizes) {
      $item: nth($sizes, $i);
  
      &[size="#{map-get($item, type)}"] {
        width: map-get($item, width);
  
        .modal-body {
          min-height: map-get($item, minHeight);
        }
        .modal-body-content {
          width: map-get($item, contentWidth);
        }
      }
    }
  
    .modal-body {
      padding: 0 30px 10px;
      overflow-y: auto;
  
      // & > div {
      //   padding: 10px;
      //   box-shadow:0px 1px 18px 0px rgba(74,144,226,0.1);;
      // }
    }
  
    // 弹框顶部样式
    .modal-header {
      position: relative;
      text-align: center;
      color: #212b36;
      font-size: 16px;
      line-height: 18px;
      padding: 26px 0 20px;
      font-weight: 500;
      cursor: grab;
      // 关闭按钮样式
      .trigger-close {
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 12px;
        cursor: pointer;
        color: #212b36;
      }
    }
    // 底部样式
    .modal-footer {
      padding: 10px 30px;
      height: 54px;
    }
  }
  .dialog-fade-enter-active {
    -webkit-animation: dialog-fade-in .3s;
    animation: dialog-fade-in .3s
  }

  .dialog-fade-leave-active {
      -webkit-animation: dialog-fade-out .3s;
      animation: dialog-fade-out .3s;
      animation-fill-mode: forwards;
  }

  @-webkit-keyframes dialog-fade-in {
      0% {
          -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
          opacity: 0
      }

      100% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }

  }

  @keyframes dialog-fade-in {
      0% {
          -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
          opacity: 0
      }

      100% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }

  }

  @-webkit-keyframes dialog-fade-out {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }

      100% {
          -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
          opacity: 0
      }

  }

  @keyframes dialog-fade-out {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          opacity: 1
      }

      100% {
          -webkit-transform: translate3d(0, -20px, 0);
          transform: translate3d(0, -20px, 0);
          opacity: 0;
      }

  }
  .dialog-fade-show{
	  transition: opacity .3s ease;
  }
  .dialog-fade-hide{
    opacity: 0;
	  transition: opacity .3s ease;
  }
</style>


